<template>
    <div>
        <div class="personal flex_wrap">
            <div class="touxiang" @click="ChangeUserInfo()">
                <img :src="useInfo.userPhoto" />
            </div>
            <div class="info">
                <div class="usename" v-if="useInfo.userTypeId!=4" >{{useInfo.userName}}</div>
                <div class="usename" v-if="useInfo.userTypeId==4" ><span v-for="student in useInfo.studentList" v-if="student.checked">{{student.studentName}}的{{useInfo.nickName}}</span></div>
                <div class="didian"><i class="weizhi"></i>{{useInfo.schoolName}}</div>
            </div>
            <div class="qiandao_wrap">
                <span ><a class="qiandao">每日签到</a></span>
                <div @click="ChangeUserInfo()" class="more"></div>
            </div>
        </div>
        <div class="main" >
            <!-- <div class="row flex mine_row">
                <div class="left">
                    <img slot="icon" src="../../static/images/mine/4@2x.png" width="24" height="24">
                </div>
                <div class="right">
                    <div>我的积分</div>
                    <div class="flex">
                        <div class="desc">{{jifenNums}}积分</div>
                        <div class="more"></div>
                    </div>    
                </div>
            </div> -->
            <div class="row flex mine_row">
                <div class="left">
                    <img slot="icon" src="../../static/images/mine/6@2x.png" width="24" height="24">
                </div>
                <div class="right" @click="selectSchool()" >
                    <div>切换校区</div>
                    <div class="flex">
                        <div class="desc"></div>
                        <div class="more"></div>
                    </div>    
                </div>
            </div>
            <div class="row flex mine_row" @click="changePassword()" >
                <div class="left">
                    <img slot="icon" src="../../static/images/mine/5@2x.png" width="24" height="24">
                </div>
                <div class="right">
                    <div>修改密码</div>
                    <div class="flex">
                        <div class="more"></div>
                    </div>    
                </div>
            </div>
            <div class="row flex mine_row">
                <div class="left">
                    <img slot="icon" src="../../static/images/mine/9@2x.png" width="24" height="24">
                </div>
                <div class="right" @click="showMsgList()">
                    <div>消息中心</div>
                    <div class="flex">
                        <div v-if="hasNewMsg" class="desc"><span class="msgnum">New</span></div>
                        <div  class="more"></div>
                    </div>    
                </div>
            </div>
            <div class="row flex mine_row" @click="addValueService()">
                <div class="left">
                    <img slot="icon" src="../../static/images/mine/3@2x.png" width="24" height="24">
                </div>
                <div class="right">
                    <div>增值服务</div>
                    <div class="flex">
                        <div class="more"></div>
                    </div>    
                </div>
            </div>
            <div class="row flex mine_row" v-if="useInfo.userTypeId==4" @click="myService()">
                <div class="left">
                    <img slot="icon" src="../../static/images/mine/10@2x.png" width="24" height="24">
                </div>
                <div class="right">
                    <div>我的服务</div>
                    <div class="flex">
                        <div class="more"></div>
                    </div>    
                </div>
            </div>
            <div class="row flex mine_row" @click="section()">
                <div class="left">
                    <img slot="icon" src="../../static/images/mine/7@2x.png" width="24" height="24">
                </div>
                <div class="right">
                    <div>设置</div>
                    <div class="flex">
                        <div class="more"></div>
                    </div>    
                </div>
            </div>                                              
        </div>
    </div> 
</template>

<script>
    import {
        MessageBox
    } from 'mint-ui';
    export default {
        data() {
            return {
                touxiangSrc: require("../../static/images/other/girl.jpg"),
                UseName: '彭于晏',
                didian: '思明校区',
                jifenNums: '8',
                msgnums: '2',
                imgsrc: '',
                useInfo: '',
                hasNewMsg: false,
            }
        },
        methods: {
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            getRadioBack() {
                var radioBackOptions = JSON.parse(sessionStorage.getItem('radioBackOptions'));
                if (radioBackOptions) {
                    switch (radioBackOptions.title) {
                        case "切换校区":
                            this.useInfo.schoolId = radioBackOptions.item.schoolId
                            this.useInfo.schoolName = radioBackOptions.item.schoolName
                            var params = {
                                schoolId: radioBackOptions.item.schoolId,
                                userId: this.useInfo.userId,
                            }
                            var url = 'student/selectStudentByUserId'
                            this.$api.post(url, params, o => {
                                if (o.info[0]) {
                                    o.info[0].checked = true;
                                }
                                this.useInfo.studentList = o.info;
                                sessionStorage.removeItem('radioBackOptions');
                                sessionStorage.setItem('useInfo', JSON.stringify(this.useInfo));
                            })
                            break;
                    }

                }
            },
            ChangeUserInfo() {
                this.$api.clearItem();
                this.$router.push({
                    'path': '/userInfo'
                })
            },
            changePassword() { //修改密码
                this.$router.push({
                    path: 'm3'
                })
            },
            selectSchool() { //切换校区
                var url = "school/listData";
                var params = {
                    userTypeId: this.useInfo.userTypeId,
                    userId: this.useInfo.userId
                }
                this.$api.post(url, params, (data) => {
                    data.info.forEach(element => {
                        element.radioHeadPhoto = element.schoolPhoto;
                        element.radioName = element.schoolName;
                        if (element.schoolId == this.useInfo.schoolId) {
                            element.checked = true;
                        }
                    });
                    if (data.info.length > 0) {
                        var options = {
                            title: "切换校区",
                            list: data.info
                        };
                        console.log(JSON.parse(JSON.stringify(options)))
                        sessionStorage.setItem('radioOptions', JSON.stringify(options));
                        this.$router.push({
                            'path': '/radio'
                        })
                    } else {
                        MessageBox('提示', '没有可切换校区')
                    }
                })
            },
            showMsgList() { //消息中心
                this.$router.push({
                    'path': '/m4'
                })
            },
            addValueService() { //增值服务
                // sessionStorage.setItem('RadioTitle', 'addValueService')
                this.$router.push({
                    'path': '/m5'
                })
            },
            myService() { //我的服务
                this.$router.push({
                    'path': '/m6'
                })
            },
            section() { //设置
                this.$router.push({
                    'path': '/m7'
                })
            },
            getMsgType() {
                var url = 'message/msgCount'
                var params = {
                    userId: this.useInfo.userId,
                    schoolId: this.useInfo.schoolId,
                }
                this.$api.post(url, params, (data) => {
                    console.log('hasNewMsg', data.info)
                    this.hasNewMsg = data.info
                })
            }
        },
        created() {
            this.getUseInfo();
            this.getRadioBack();
            this.getMsgType();
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .flex_wrap {
        display: flex;
    }
    
    .touxiang {
        width: 2.3rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    
    .touxiang img {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        border: 2px solid #5caffa;
    }
    
    .info {
        width: 4rem;
        text-align: left;
    }
    
    .info .didian {
        color: #bad5fb;
        font-size: 0.34666rem;
        height: auto;
    }
    
    .info .usename {
        color: #ffffff;
        font-size: 0.48rem;
        padding-top: 0.5rem;
        padding-bottom: 0.1rem;
        height: auto;
    }
    
    .qiandao_wrap {
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 0.45333rem;
    }
    
    .qiandao_wrap .more {
        top: 0.04rem;
        width: 0.2rem;
        height: 0.4rem;
    }
    
    .qiandao {
        background: #ffb31f;
        height: 1rem;
        width: auto;
        padding: 0.22rem 0.2rem;
        border-radius: 0.1rem;
        color: white;
        font-size: 0.2rem;
        margin-right: 0.32rem;
    }
    
    .weizhi {
        background-image: url("../../static/images/mine/weizhi.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        display: inline-block;
        width: 0.25rem;
        height: 0.35rem;
        margin-right: 0.14rem;
        top: 0.05rem;
        position: relative;
    }
    
    .personal {
        /* background-image: url('../../static/images/mine/personal_bg.jpg'); */
        background-color: #0489ff;
        background-size: 100% 100%;
        height: 2.5rem;
        width: 100%;
        justify-content: space-between;
    }
    
    .personal div {
        height: 100%;
    }
    
    .main {
        text-align: left;
    }
    
    .menu_button {
        width: 2rem;
        height: 2rem;
        border: 1px solid red;
    }
    
    .msgnum {
        display: inline-block;
        height: 0.5rem;
        padding: 0 0.25rem;
        font-size: 0.3rem;
        line-height: 0.5rem;
        border-radius: 0.3rem;
        background: #e53623;
        color: #fff;
        text-align: center;
    }
    
    .main .mint-cell {
        border-bottom: 1px solid #dfdfdf;
    }
</style>